// 运单管理
<template>
  <div class="waybill-management">
    <div class="top-card box">
      <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="运单编号">
          <el-input v-model="pageParams.id" placeholder="请输入运单编号" />
        </el-form-item>

        <el-form-item label="订单编号">
          <el-input v-model="pageParams.orderId" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="调度状态">
          <div class="select">
            <el-select v-model="pageParams.orderId" size="20" placeholder="请选择">
              <el-option label="待调度" value="1" />
              <el-option label="未匹配线路" value="2" />
              <el-option label="已调度" value="3" />

            </el-select>
            <!-- <el-select ref="selectTree" v-model="selectValue.a" class="main-select-tree">
                <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="value" style="display: none;" />
                <el-tree
                  ref="selecteltree"
                  class="main-select-el-tree"
                  :data="networkList"
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @node-click="hasValue"
                />
              </el-select> -->
          </div>
        </el-form-item>
        <el-form-item label="起始地机构">
          <div class="select">
            <el-select size="20" placeholder="请选择省">
              <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
              <el-select ref="selectTree" v-model="selectValue.b" class="main-select-tree">
                <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="value" style="display: none;" />
                <el-tree
                  ref="selecteltree"
                  class="main-select-el-tree"
                  :data="networkList"
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @node-click="hasValue"
                />
              </el-select>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="目的地机构">
          <div class="select">
            <el-select ref="selectTree" v-model="selectValue.c" class="main-select-tree">
              <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="networkList"
                node-key="id"
                highlight-current
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="当前所在地机构">
          <div class="select">
            <el-select ref="selectTree" v-model="selectValue.d" class="main-select-tree">
              <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="networkList"
                node-key="id"
                highlight-current
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </div>
        </el-form-item>

        <el-form-item class="btn">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table box">
      <el-table :data="waybilllist" stripe style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="运单编号" width="200" />
        <el-table-column prop="orderId" label="订单编号" width="200" />
        <el-table-column prop="status" label="运单状态" width="200">
          <template v-slot="{row}">{{ statusmap.get(row.status) }}</template>
        </el-table-column>

        <el-table-column prop="schedulingStatus" label="调度状态" width="100">
          <template v-slot="{row}">
            {{ schedulingstatusmap.get(row.schedulingStatus) }}
          </template>
        </el-table-column>

        <el-table-column prop="startAgencyName" label="起始营业部" width="200" />
        <el-table-column prop="endAgencyName" label="终点营业部" width="200" />
        <el-table-column prop="currentAgencyName" label="当前所在地机构" width="100" />
        <el-table-column prop="nextAgencyName" label="下一个机构" width="200" />
        <el-table-column prop="totalVolume" label="货品总体积(立方米)" width="200" />

        <el-table-column prop="totalWeight" label="货品总重量(千克)" />
        <el-table-column prop="created" label="创建时间" />
        <el-table-column prop="updated" label="更新时间" />

        <el-table-column label="操作" fixed="right" width="200">
          <template v-slot="{ row }">
            <el-link style="color: #66c2ff" @click="look(row.id)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" style="height:60px" align="middle" justify="end">
        <el-pagination
          :current-page="this.pageParams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="this.pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(counts)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getwaybillList, getnetworkList } from '@/api/waybillmanage'
export default {
  name: 'Waybillmanage',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      networkList: [],
      value: 11,
      selectValue: {
        a: '',
        b: '',
        c: '',
        d: ''
      },
      pageParams: {

        transportLine: '',
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10
      },
      counts: 1, // 总条数
      waybilllist: [], // 运单单列表
      // 运单状态列表
      statusmap: new Map([
        [1, '新建'],
        [2, '已装车，发往x转运中心'],
        [3, '到达'],
        [4, '到达终端网点']
      ]),
      schedulingstatusmap: new Map([
        [1, '待调度'],
        [2, '未匹配路线'],
        [3, '已调度']

      ])

    }
  },
  created() {
    this.getwaybillList()
  },
  methods: {
    hasValue(row) {
      this.driverForm.transportLine = row.id
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    async getwaybillList() {
      const res = await getwaybillList(this.pageParams)
      this.waybilllist = res.data.items

      this.counts = res.data.counts

      const res1 = await getnetworkList()
      this.networkList = JSON.parse(res1.data)
    },
    // 分页器
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.getwaybillList()
    },
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.getwaybillList()
    },
    // 搜索
    search() {
      this.getwaybillList()
    },
    // 查看详情
    look(id) {
      this.$store.commit('user/SET_NAV_STATUS', true)
      this.$router.push(`/waybillmanage/detail/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.waybill-management {
  padding: 0 20px;
  margin-top: 20px;
}
.top-card {
  // height: 142px;
  margin-bottom: 15px;

  ::v-deep .demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      text-align: right;
      width: 30%;
      input {
        width: 320px;
      }
      .select {
        display: flex;
        width: 320px;
        & .el-select:nth-child(n + 2) {
          margin-left: 10px;
        }
        .el-select {
          position: relative;
          width: 100px;
          * {
            width: 100%;
          }
          i {
            position: absolute;
            right: -40px;
          }
          .el-input__inner {
            width: 105px;
          }
        }
      }
    }
    .btn {
      text-align: left;
      margin-left: 20px;
    }
  }
}
.box {
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  min-height: 50px;
}
</style>
